<template>
  <div>
    <a-modal v-model:visible="visible" :width="800" title="新增合同模板" @cancel="cacelModel" :bodyStyle="bodyStyle"  @ok="handleOk">
      <a-form :model="formState" ref="templeForm" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="16">
          <a-col :span="9" :style="{paddingBottom: '10px'}">
            <a-form-item name="dragger" no-style>
              <a-upload-dragger v-model:fileList="fileList"
                                :max-count="1"
                                :action="action"
                                :beforeUpload="beforeUpload"
                                @change="postFile"
                                name="file"
                                accept=".pdf, .docx"
                                >
                <div class="dragger-img">
                  <img src="@/assets/images/ResourceContract/file.png" alt="">
                </div>
                <p class="ant-upload-text" :style="{color: '#2C3749'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
                <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '14px'}" >只支持pdf、docx格式</p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
          <a-col :span="15">
<!--            <div class="form-item-border">-->
<!--              <a-form-item label="模板编号" name="templateNumber" :rules="[{ required: true, message: '请输入模板编号' }]">-->
<!--                <a-input :bordered="false" v-model:value="formState.templateNumber"  placeholder="请输入模板编号"/>-->
<!--              </a-form-item>-->
<!--            </div>-->
<!--            <div class="form-item-border">-->
<!--              <a-form-item label="模板名称" name="templateName" :rules="[{ required: true, message: '请输入模板名称' }]">-->
<!--                <a-input :bordered="false" v-model:value="formState.templateName"  placeholder="请输入模板名称"/>-->
<!--              </a-form-item>-->
<!--            </div>-->
            <div class="form-item-border">
              <a-form-item label="模板类别" name="templateType" :rules="[{ required: true, message: '请选择模板类别' }]">
                <a-select :bordered="false" v-model:value="formState.templateType" placeholder="请选择模板类别" :options="contractType" />
              </a-form-item>
            </div>
            <div class="form-item-border" :style="{height: '33%'}">
              <a-form-item label="申请原因" name="applyReason" :rules="[{ required: true, message: '请选择申请原因' }]">
                <a-textarea :bordered="false" :autoSize="{minRows: 4, maxRows: 10}"  v-model:value="formState.applyReason" :row="4" placeholder="请输入申请原因"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn" @click="cacelModel">取消</a-button>
          <a-button key="submit" @click="handleOk" :loading="confirmLoading" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, defineEmits} from "vue";
import {message} from "ant-design-vue";
import {BASE_URL} from "@/config/proxyIp";
const { proxy  } = getCurrentInstance()
const visible = ref(false);
const isSubmit = ref(false)
const emit = defineEmits(['saveMemForm'])
const fileList = ref([])
const action = ref(`${BASE_URL}/con/common/upload`)
const bodyStyle = ref({})
const contractType = ref([
  {
    label: '资源合同-MA',
    value: 1
  },
  {
    label: '船运合同',
    value: 2
  },
  {
    label: '船舶代理合同',
    value: 3
  },
  {
    label: '第三方计量合同',
    value: 4
  },
  {
    label: '保险合同-货险',
    value: 5
  },
  {
    label: '加油合同',
    value: 6
  },
  {
    label: '律师合同',
    value: 7
  },
  {
    label: '资源合同-CN',
    value: 8
  },
  {
    label: '保险合同-租船人责任险',
    value: 9
  },
])
const labelCol = ref(
    {
      style: {
        width: '80px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = reactive({
  templateName: '',
  templateType: undefined,
  applicant: '',
  archiveTime: '',
  applyReason: '',
  path: '',
  templateNumber: ''
})
const templeForm = ref()
const showModal = () => {
  visible.value = true
  fileList.value = []
  console.log('formAdd', templeForm.value)
};
const cacelModel = () =>{
  visible.value = false
  isSubmit.value = false
  fileList.value = []
  templeForm.value.resetFields()
}
const confirmLoading = ref(false)
const handleOk = () => {
  if (formState.path) {
    templeForm.value.validateFields().then(() => {
      console.log('上传的formData', formState);
      confirmLoading.value = true
      proxy.$api.postAddTemplate(formState).then(res => {
        if (res.resultCode === 0) {
          visible.value = false;
          isSubmit.value = true
          confirmLoading.value = false
          emit('saveMemForm', isSubmit.value)
          message.success('新增合同模板成功')
          templeForm.value.resetFields()
        }
      })
    }).catch(err => {
      console.log('请输入', err)
    })
  } else {
    message.error('请上传合同模板文件')
  }

}
const postFile = (info) => {
  console.log('上传文件1', info)
  const status = info.file.status
  if (status === 'done') {
    formState.path = info.file.response.resultObject
  } else if (status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
}
const beforeUpload = (file) => {
  console.log('上传文件2', file)
  let houzui = file.name.substring(file.name.lastIndexOf('.'), file.name.length).toLowerCase()
  let res = ['.pdf','.docx'].includes(houzui)
  // '.doc', '.docx'
  if (!res) {
    fileList.value = []
    message.error('请上传PDF或者docx文件')
  }
  return res
}
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.from-btn-right {
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  // box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
.dragger-img {
  img {
    width: 140px;
    height: 110px;
  }
}
</style>
